<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 重置默认 margin 和 padding */
        body, html {
            margin: 0;      /* 移除<body>和 <html> 的默认外边距*/
            padding: 0;     /* 移除<body>和 <html> 的默认内边距*/
            height: 100%;   /* 强制 <body> 和 <html> 的高度等于视口（viewport）高度。 */
        }

       /*  侧边选择栏css代码     */
        #index{
            border: 1px solid red;
            width:200px;
            height: 100%;
            background:cornflowerblue;
            border-radius: 0 15px 15px 0; /* 右上和右下圆角 */
            position: fixed; /* 固定定位 */
            left: -85px; /* 默认隐藏大部分内容，只留15px悬停区域 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
            overflow: hidden; /* 隐藏溢出的内容 */
            box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
        }

        /* 让index侧边栏，鼠标悬停完全显示 */
          #index:hover{
              left:0;
              width: 200px;     /*   悬停时可以略微宽一点   */
          }

           /* li样式 */
        #index li {
            font-size: 14px; /* 缩小字体 */
            color: white;
            padding: 10px;
            margin-bottom: 10px;
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 8px; /* 圆角 */
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* 标题的样式 */
        #title {
            color: white;
            text-align: center;
            font-size: 18px;
            margin: 10px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }

         /* ul列表样式 */
         /* 菜单容器样式 */
        #index ul {
            list-style: none;
            padding: 15px;
            margin: 0;
            flex: 1; /* 占据剩余空间 */
            display: flex;
            flex-direction: column;
            justify-content: space-around; /* 均匀分布 */
            gap: 12px; /* 项目间距 */
        }

        /*    右边展示图形的盒子      */
       #view {
            position: fixed;
            left: 30px; /* 与侧边栏露出的部分对齐 */
            right: 0;
            top: 0;
            bottom: 0;
            background: #f5f7fa;
            overflow: auto; /* 内容过多时滚动 */
            transition: left 0.3s ease; /* 与侧边栏动画同步 */
            padding: 20px;
            box-sizing: border-box;
        }

        /* 当侧边栏展开时调整view的位置 */
        #index:hover ~ #view {
            left: 200px; /* 侧边栏宽度 */
        }
    </style>

    <!--   导入echarts组件  -->
    <script src="../static/js/echarts.min.js"></script>
	<!--    3d图形必须要导入这个库，否则不显示图形	-->
	<!-- 引入 echarts-gl 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<!--     导入词云组件	-->
	<script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<!--侧边栏盒子-->
<div id="index">
    <!--    标题    -->
    <h2 id="title">可视化图形选择</h2>
    <!--  ul  -->
    <ul>
        <li>分析每个类型电影的出现次数</li>
        <li>分析每个国家的电影数量</li>
        <li>分析角色出演主角次数Top10</li>
        <li>人物成为主演次数分析</li>
        <li>各类型电影的平均分Top10</li>
        <li>各国家拍摄电影平均分Top10</li>
        <li>可视化大屏</li>
    </ul>
</div>

<!-- 右边显示表格的盒子 -->
<div id="view">
    <!-- 这里将根据选择显示不同的图表 -->
    <div class="chart-content">
        <h2>请从左侧菜单选择可视化图表</h2>
        <p>选择不同的选项将在这里显示对应的数据可视化图表</p>
    </div>
</div>

<!-- 添加选择不同类型的可视化图形的交互逻辑   -->
<script>
    //  todo querySelector:拿到文档中所有匹配指定css选择器的元素 这里是拿到所有的菜单里面li标签
    document.querySelectorAll('#index li').forEach((item,index) =>{
        //  todo 给所有的li添加一个监听事件，类型为点击
        item.addEventListener('click',function() {
              // 如果是第7个菜单项（索引6，可视化大屏）
        if(index === 6) {
            // 跳转到可视化大屏页面
            //  todo window.location.href:修改网页的url链接
            //  这里直接修改成我flask提供的路由，直接跳转至可视化大屏
            window.location.href = '/view_all';  // 使用在Flask中定义的路由
            return;  // 直接返回，不执行后面的图表初始化代码
        }


            //  获取点击的菜单项文本
            //  todo 这里的this指向触发事件的元素我，所以这里的是直接获取了li标签里面的文本内容
            //  todo 这里的const创建的变量内容不可更改，但是数组集合可以内容
            const chartName = this.textContent;


            //  todo 更新view的内容 选择直接覆盖原来的html代码
            //  todo 反引号可以定义比较长的字符串，换行不需要\n，适合拿来写sql
            //  todo #{变量名}可以直接获取值
            document.getElementById("view").innerHTML=`
                <div class="chart-content">
                <h2>${chartName}</h2>

               <div id="chart-container" style="height:600px;width:100%"></div>
                </div>
            `;
            //  todo 初始化图形
            const myChart = echarts.init(document.getElementById("chart-container"));

            //  根据点击的选项显示不同的图表
            switch(index){
                case 0: //  分析每个类型电影出现的次数
                    view_t1(myChart);
                    break;
                case 1:  //  分析每个国家的电影数量
                    view_t2(myChart);
                    break;
                case 2: //  分析角色出演主角次数Top10
                    view_t3(myChart);
                    break;
                case 3: //  人物成为主演次数分析
                    view_t4(myChart);
                    break;
                case 4: //  类型的电影平均分Top10
                    view_t5(myChart);
                    break;
                case 5: //  各国家拍摄电影平均分Top10
                    view_t6(myChart);
                    break;
            }

        });
    });

    //  todo 创建第一张图的方法  词云图
    function view_t1(chart){
		//	数据源 flask的写法，引入python的data1变量
		var data1={{data1|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		const option = {
        	title:{
						text:'各类型电影数量',
						left:'center',
						top:5
					},
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                gridSize: 30,
                sizeRange: [20, 70], // 字体大小范围
                 rotationRange: [-30, 30], // 减小旋转幅度
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255)
                            ].join(',') + ')';
                        }
                    }
                },
                data: data1
            }]
        };

		//	展示图形1
		chart.setOption(option);
    }


    //  todo 创建第二张表的方法  饼图
    function view_t2(chart){
		//	数据源 flask的写法，引入python的data1变量
		var data2={{data2|tojson|safe}};
		//	把数据提取到
		var data2_dict=[];
		//	将数据追加到data2里面
		for(var key in data2){
			data2_dict.push(data2[key])
		}
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
  title: {
    text: '每个国家拍摄电影数量',
    left: 'center',
	  top:5
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
	 top:50
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '60%',
		 center: ['50%', '50%'],
      data: data2_dict,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

		//	展示图形2
		chart.setOption(option);
    }

    //  todo 创建第三张表的方法  环形图
    function view_t3(chart){
		//	数据源 flask的写法，引入python的data3变量
		var data3={{data3|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
	option = {
    // 添加标题
    title: {
        text: '角色主演次数分析',  // 替换为实际需要的标题
        left: 'center',
        top: 0,  // 标题位置在顶部
        textStyle: {
            fontSize: 18,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    // 调整图例位置
    legend: {
        top: '5%',  // 将图例下移，避免遮挡
        left: 'center',
        orient: 'horizontal',  // 水平排列
        itemGap: 10  // 图例项之间的间隔
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '55%'],  // 调整环形图位置
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data3
        }
    ]
};

		//	展示图形3
		chart.setOption(option);
    }


    //  todo 创建图形四的方法  环形图
    function view_t4(chart){
		//	数据源 flask的写法，引入python的data3变量
		var data4={{data4|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
  title: {
        text: '中国参与拍摄占比',
        left: 'center',
        top: 0,
        textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
        },
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'  // 提示框显示格式
  },
  legend: {
    top: '10%',
    left: 'center',
    data: ['中国参演', '中国未参演']  // 修改图例显示文本
  },
  series: [
    {
      name: '参演情况',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      startAngle: 180,
      endAngle: 360,
      data: [
        {
          value: data4.find(item => item.name === 1).value,  // 1对应的值
          name: '中国参演'  // 将1映射为"中国参演"
        },
        {
          value: data4.find(item => item.name === 0).value,  // 0对应的值
          name: '中国未参演'  // 将0映射为"中国未参演"
        }
      ],
      label: {
        show: true,
        formatter: '{b}: {c} ({d}%)'  // 饼图标签显示格式
      }
    }
  ]
};
    //  展示图形4
        chart.setOption(option);
    }

    //  todo 创建展示图形5的方法  柱状图
    function view_t5(chart){
		//	数据源 flask的写法，引入python的data3变量
		var data5={{data5|tojson|safe}};
		//	将数据添加到指定数组
		var data5_x=[];
		var data5_y=[];
		//	添加数据
		for(var key in data5){
			data5_x.push(data5[key]['name']);
			data5_y.push(data5[key]['value'])
		}
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
			 title: {
        text: '各类型电影平均分Top10',
        left: 'center',
        top: 0,
        textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
        }
    },
  xAxis: {
    type: 'category',
    data: data5_x, // 假设 data5_x = ['类型A', '类型B', ...]
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: 30,  // 标签旋转30度（防止重叠）
      fontSize: 12,
      margin: 15    // 标签与轴线的距离
    },
    axisTick: {
      alignWithLabel: true // 刻度与标签对齐
    }
  },
  yAxis: {
    type: 'value',
    min: function(value) { // 动态设置最小值（比数据最小值稍低）
      return (value.min - 0.1).toFixed(2);
    },
    max: function(value) { // 动态设置最大值（比数据最大值稍高）
      return (value.max + 0.1).toFixed(2);
    },
    axisLabel: {
      formatter: '{value}.00' // 强制显示两位小数（如 8.00）
    },
    splitNumber: 10 // 增加Y轴分割段数
  },
  grid: {
    bottom: '20%' // 底部留更多空间给X轴标签
  },
  series: [{
    data: data5_y, // 假设 data5_y = [8.04, 8.09, ...]
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
      color: 'rgba(180, 180, 180, 0.2)'
    },
    label: { // 在柱顶显示数值
      show: true,
      position: 'top',
      formatter: '{c}' // 显示原始数据值
    },
    barWidth: '60%' // 调整柱宽
  }]
};


		//	展示图形5
		chart.setOption(option);
    }

    //  todo 创建图形6的方法
    function view_t6(chart){
		//	数据源 flask的写法，引入python的data3变量
		var data6={{data6|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
            title: {
                text: '各国电影平均评分 TOP10',
                left: 'center',
                textStyle: {
                    fontSize: 18
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{b}: {c}'  // 提示框格式：国家: 评分
            },
            grid: {
                left: '15%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name: '平均评分',
                axisLabel: {
                    formatter: '{value}'  // 可改为 '{value}分' 更明确
                },
                min: 7,  // 根据数据范围调整
                max: 10
            },
            yAxis: {
                type: 'category',
                data: data6.map(item => item.name),  // 国家列表
                axisLabel: {
                    fontSize: 12
                }
            },
            series: [{
                name: '评分',
                type: 'bar',
                data: data6.map(item => item.value),  // 评分列表
                label: {
                    show: true,
                    position: 'right',  // 数值显示在柱子右侧
                    formatter: '{c}'    // 显示原始值
                },
                itemStyle: {
                    color: function(params) {
                        // 按评分高低设置渐变色
                        const colors = [
                            [0.8, '#61a0a8'],  // 低评分
                            [0.95, '#c23531']  // 高评分
                        ];
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: colors[0][1] },
                            { offset: params.data / 10, color: colors[1][1] }
                        ]);
                    },
                    borderRadius: [0, 5, 5, 0]  // 柱子右侧圆角
                }
            }]
        };



		//	展示图形6
		chart.setOption(option);
    }

</script>
</body>
</html>